<template>
	<a-layout-content>
		
		<view class="main-box">
			<view class="video-content" v-if="showVideo">
				<video v-if="showVideo" :src="adv_video" autoplay="true" style="width: 100%;height: 100%;"></video>
				<uni-icons @click="()=>{showVideo=!showVideo}" class="video-close" type="closeempty" color="#ff4d4f" size="32"></uni-icons>
			</view>
			<view class="banner">
				<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bannerList">
						<view class="swiper-item">
							<image :src="item.img" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>

				<view class="abs-content">
					<uni-row>
						<uni-col>
							<h2 class="title-v1">交规培训加盟</h2>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<image class="title-img" src="@/static/home/title.png"></image>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col offset="18">
							<image class="playbtn" @click="()=>showVideo=!showVideo" src="@/static/home/playbtn.png"></image>
						</uni-col>
					</uni-row>
					<uni-row :gutter="2" style="display: flex;justify-content: space-between;">
						<uni-col :span="4" class="item-adv" v-for="(item,index) in advList" :key="item.id">
							<a-row>
								<a-col span="12" offset="10" style="margin-top: 24rpx;">
									<image :src="'/static/home/'+item.img"></image>	
								</a-col>
							</a-row>
							<a-row>
								<a-col span="24" >
									<h2 style="text-align: center;">{{item.title}}</h2>
								</a-col>
							</a-row>
							<a-row>
								<a-col span="20" offset="2">
									<p style="color: #000;">{{item.content}}</p>	
								</a-col>
							</a-row>
						</uni-col>
					</uni-row>
				</view>
			</view>

			<view class="people-box">
				<uni-row :gutter="2">
					<uni-col></uni-col>
				</uni-row>
			</view>
		</view>

	</a-layout-content>
</template>
<script>
	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'

	const db = uniCloud.database()
	const cmd = db.command
	export default {
		data() {
			return {
				adv_video:'',
				advList:[
					{
						id:1,
						img:'v1.png',
						title:'行业始创者',
						content:'交规速成强化行业始创者；11年真实运营数据可查。'
					},
					{
						id:2,
						img:'v2.png',
						title:'在线人数庞大',
						content:'全国1000+网点即时学习人数实时显示，用数据说话。'
					},
					{
						id:3,
						img:'v3.png',
						title:'加盟网点多',
						content:'截至2017年全国加盟网点超过第二名至第十名的总和。'
					},
					{
						id:4,
						img:'v4.png',
						title:'整合系统平台',
						content:'依靠营销和辅导为主，软件为辅的整合系统平台。'
					}
				],
				bannerList: [],
				background: ['#fafafa', '#6e61fa', '#28cdfa'],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				showVideo:false
			}
		},
		onReady() {
			this.getBanner()
			this.getVideo()
		},
		methods: {
			async getVideo(){
				const videoResult = await db.collection('adv-video').limit(1).get()
				if(videoResult.result.data.length>0){
					this.adv_video =videoResult.result.data[0].video_src
				}
				console.log(videoResult.result.data[0])
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			async getBanner() {
				const bannerList = await db.collection('banner').orderBy('sort asc').get()
				if (bannerList.result.data.length > 0) {
					for (let s of bannerList.result.data) {
						this.bannerList.push(s)
					}
				}
			}
		},
		components: {

		},
		onLoad(params) {

		},
		setup() {
			return {

			};
		}
	}
</script>
<style>
	@import url("./index.css");
</style>
